<template>
  <div id="container" class="w-100%" style="height: calc(100% - 100px)"></div>
</template>

<script>
import G6 from '@antv/g6'
import gl from '../../assets/image/steamDiagram/gl-icon.png'
import sj from '../../assets/image/steamDiagram/sj-icon.png'
import wx from '../../assets/image/steamDiagram/wx-icon.png'

export default {
  mounted() {
    const data = {
      nodes: [
        { id: 'gl1', label: '1#锅炉', img: gl, imgWidth: 96, imgHeight: 56, x: 0, y: 0 },
        { id: 'gl2', label: '2#锅炉', img: gl, imgWidth: 96, imgHeight: 56 },
        { id: 'gl3', label: '3#锅炉', img: gl, imgWidth: 96, imgHeight: 56 },
        { id: 'gl4', label: '4#锅炉', img: gl, imgWidth: 96, imgHeight: 56 },

        { id: 'sj1', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },
        { id: 'sj2', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },
        { id: 'sj3', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },
        { id: 'sj4', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },
        { id: 'sj5', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },

        { id: 'sj6', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },
        { id: 'sj7', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },
        { id: 'sj8', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },

        { id: 'sj9', label: '双减', img: sj, imgWidth: 69, imgHeight: 61 },

        { id: 'wx1', label: '卫星', img: wx, imgWidth: 70, imgHeight: 70 },
        { id: 'wx2', label: '厂用', img: wx, imgWidth: 70, imgHeight: 70 },
        { id: 'wx3', label: '嘉宏', img: wx, imgWidth: 70, imgHeight: 70 },
        { id: 'wx4', label: '碳三', img: wx, imgWidth: 70, imgHeight: 70 },
        { id: 'wx5', label: '瑞一', img: wx, imgWidth: 70, imgHeight: 70 },
        { id: 'wx6', label: '盛奥', img: wx, imgWidth: 70, imgHeight: 70 },
      ],
      edges: [
        { source: 'gl1', target: 'sj1' },
        { source: 'gl1', target: 'sj2' },
        { source: 'gl1', target: 'sj3' },
        { source: 'gl1', target: 'sj4' },
        { source: 'gl1', target: 'sj5' },

        { source: 'gl2', target: 'sj1' },
        { source: 'gl2', target: 'sj2' },
        { source: 'gl2', target: 'sj3' },
        { source: 'gl2', target: 'sj4' },
        { source: 'gl2', target: 'sj5' },

        { source: 'gl3', target: 'sj1' },
        { source: 'gl3', target: 'sj2' },
        { source: 'gl3', target: 'sj3' },
        { source: 'gl3', target: 'sj4' },
        { source: 'gl3', target: 'sj5' },

        { source: 'gl4', target: 'sj1' },
        { source: 'gl4', target: 'sj2' },
        { source: 'gl4', target: 'sj3' },
        { source: 'gl4', target: 'sj4' },
        { source: 'gl4', target: 'sj5' },

        { source: 'sj1', target: 'wx1' },
        { source: 'sj1', target: 'wx2' },
        { source: 'sj1', target: 'wx3' },

        { source: 'sj2', target: 'sj6' },
        { source: 'sj2', target: 'sj7' },
        { source: 'sj2', target: 'sj8' },

        { source: 'sj3', target: 'sj6' },
        { source: 'sj3', target: 'sj7' },
        { source: 'sj3', target: 'sj8' },

        { source: 'sj4', target: 'sj6' },
        { source: 'sj4', target: 'sj7' },
        { source: 'sj4', target: 'sj8' },

        { source: 'sj5', target: 'sj6' },
        { source: 'sj5', target: 'sj7' },
        { source: 'sj5', target: 'sj8' },

        { source: 'sj6', target: 'sj9' },
        { source: 'sj7', target: 'sj9' },
        { source: 'sj8', target: 'sj9' },

        { source: 'sj6', target: 'wx1' },
        { source: 'sj6', target: 'wx2' },
        { source: 'sj6', target: 'wx3' },
        { source: 'sj6', target: 'wx4' },
        { source: 'sj6', target: 'wx5' },
        { source: 'sj6', target: 'wx6' },

        { source: 'sj7', target: 'wx1' },
        { source: 'sj7', target: 'wx2' },
        { source: 'sj7', target: 'wx3' },
        { source: 'sj7', target: 'wx4' },
        { source: 'sj7', target: 'wx5' },
        { source: 'sj7', target: 'wx6' },

        { source: 'sj8', target: 'wx1' },
        { source: 'sj8', target: 'wx2' },
        { source: 'sj8', target: 'wx3' },
        { source: 'sj8', target: 'wx4' },
        // { source: 'sj8', target: 'wx5' },
        // { source: 'sj8', target: 'wx6' },

        { source: 'sj9', target: 'wx5' },
        { source: 'sj9', target: 'wx6' },
      ],
    }

    const registerCustomNode = () => {
      G6.registerNode('custom-node', {
        draw(cfg, group) {
          const width = 100
          const height = 120
          const x = -width / 2
          const y = -height / 2
          const borderRadius = 4
          const labelColor = '#000000'
          const imgWidth = 100
          const imgHeight = 100

          // 添加节点图片
          group.addShape('image', {
            attrs: {
              width: cfg.imgWidth,
              height: cfg.imgHeight,
              img: cfg.img,
            },
          })

          // 添加节点标签
          group.addShape('text', {
            attrs: {
              x: x + imgWidth - 15,
              y: y + imgHeight + 30,
              text: cfg.label,
              fill: labelColor,
              textAlign: 'center',
              textBaseline: 'top',
              fontSize: 14,
              fontWeight: 'bold',
            },
          })
          return group
        },
        getAnchorPoints() {
          return [
            [0, 0.5],
            [1, 0.5],
          ]
        },
      })
    }

    const renderGraph = () => {
      const container = document.querySelector('#container')

      const width = container.scrollWidth
      const height = container.scrollHeight

      const graph = new G6.Graph({
        container: container,
        width,
        height,
        defaultNode: {
          type: 'custom-node',
          size: [80, 100],
        },
        defaultEdge: {
          // type: 'polyline',
          color: '#3699FF',
          style: {
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#3699FF',
            },
          },
        },
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          nodesep: 0,
          ranksep: 100,
        },
        modes: {
          default: ['drag-node', 'drag-canvas', 'zoom-canvas'],
        },
      })

      graph.data(data)
      graph.render()
      // graph.fitView()

      return graph
    }

    registerCustomNode()

    const graph = renderGraph()
  },
}
</script>

<style scoped>
.g6-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
